import React, { Component } from 'react'
import { Form, Input, Row, Col, Button, Table, Card } from 'antd';
import * as fetch from '../../utils/http'
import { toast } from 'react-toastify';

class AccountPassword extends Component {
    constructor(props) {
        super(props)
        this.getAllUser()
        this.state = {
            userList: [],
            currentUser: {
                name: '',
                account: '',
                id: '',
                password: ''
            },
            columns: [
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name'
                },
                {
                    title: '用户名',
                    dataIndex: 'account',
                    key: 'account'
                },
                {
                    title: '角色',
                    render: item => (
                        <div>
                            {
                                item.userRoles.length ?
                                    item.userRoles.map((child, index) => {
                                        return (
                                            <span key={child.id}>{child.role.roleName}{index === (item.userRoles.length - 1) ? '' : '、'}</span>
                                        )
                                    })
                                    :
                                    <span>暂无</span>
                            }
                        </div>
                    )
                }
            ]
        }
    }

    getAllUser() {
        fetch.get('GasUser/GetUsers').then(res => {
            if (res.isSuccess) {
                this.setState({
                    userList: res.data
                })
            }
        })
    }

    onSelectUser(e) {
        console.log(e)
        const { name, account, id } = e
        this.setState({
            currentUser: {
                name,
                account,
                id,
                password: ''
            }
        }, () => {
            console.log(this.state.currentUser)
        })
    }

    userPassword = () => {
        const { currentUser } = this.state
        const CreatUsePassword = Form.create()(props => {
            const { form } = props
            const { getFieldDecorator } = form;

            const saveUser = () => {
                form.validateFields((err, values) => {
                    if (!values.password) {
                        return
                    }
                    if (!err) {
                        console.log(values)
                        if (values.password.length < 6) {
                            toast.warn('密码不能低于6位数')
                        } else {
                            const params = {
                                account: values.account,
                                newPassword: values.password
                            }
                            fetch.post('GasUser/EditUserPassword', params).then(res => {
                                form.resetFields()
                                toast.success('密码修改成功')
                            })
                        }
                    }
                })
            }

            return (
                <Form>
                    <Form.Item label='id' className="hidden-input">
                        {getFieldDecorator('id', {
                            initialValue: currentUser.id
                        })(
                            <Input
                                readOnly={true}
                                className="h-40"
                                type="text"
                                placeholder="姓名"
                            />,
                        )
                        }
                    </Form.Item>
                    <Form.Item label='姓名'>
                        {getFieldDecorator('name', {
                            initialValue: currentUser.name
                        })(
                            <Input
                                readOnly={true}
                                className="h-40"
                                type="text"
                                placeholder="姓名"
                            />,
                        )
                        }
                    </Form.Item>
                    <Form.Item label='账号'>
                        {getFieldDecorator('account', {
                            initialValue: currentUser.account
                        })(
                            <Input
                                readOnly={true}
                                className="h-40"
                                type="text"
                                placeholder="账号"
                            />,
                        )
                        }
                    </Form.Item>
                    <Form.Item label='密码'>
                        {getFieldDecorator('password', {
                            initialValue: currentUser.password
                        })(
                            <Input
                                className="h-40"
                                type="text"
                                placeholder="密码"
                            />,
                        )
                        }
                    </Form.Item>
                    <div >
                        <Button type="primary" onClick={saveUser}>保存</Button>
                    </div>
                </Form>
            )
        })

        return <CreatUsePassword />
    }


    render() {
        const { columns, userList } = this.state
        return (
            <div>
                <h3>修改密码</h3>
                <Row>
                    <Col span={16}>
                        <Card title="用户列表" style={{ minHeight: 'calc(100vh - 120px)' }}>
                            <Table onRow={(record) => ({
                                onClick: () => {
                                    this.onSelectUser(record);
                                },
                            })}
                                bordered columns={columns} rowKey="id" dataSource={userList} size="middle" />
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card title="当前用户" style={{ minHeight: 'calc(100vh - 120px)' }}>
                            {
                                this.userPassword()
                            }
                        </Card>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default AccountPassword;